<!--课程考核实施计划/教研室主任-->
<template>
  <div class="assessment-container">
    <div class="search-container" style="margin:0;padding:0">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xq"
            style="width: 120px"
            size="mini"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>培养层次：</span>
          <el-select
            v-model="pycc"
            clearable
            style="width: 120px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in pyccList"
              :key="item.value"
              :label="item.dictValue"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>修习类型：</span>
          <el-select
            v-model="xxlx"
            clearable
            style="width: 120px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xxlxList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>课程名称：</span>
          <el-input
            style="width: 120px"
            size="mini"
            placeholder="请输入内容"
            v-model="course"
            clearable
          ></el-input>
        </div>
         <div class="search-container-item">
          <span>教员名称：</span>
          <el-input
            style="width: 120px"
            size="mini"
            clearable
            placeholder="请输入内容"
            v-model="teachingfaculty"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>状态：</span>
          <el-select
            v-model="zt"
            style="width: 120px"
            size="mini"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in ztList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-button" @click="handleQuery" style="margin-top:2px">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span>查询</span>
        </div>
      </div>
      <div class="search-container-right">
        <div
          class="add-button"
          @click="toChangeRecord"
        >
          <img src="../../../assets/assessment/icon-add.png" alt=""/>
          <span>审查通过</span>
        </div>
           <div
          class="add-button"
          @click="showYprDialog = true"
        >
          <img src="../../../assets/assessment/icon-add.png" alt=""/>
          <span>申请授权</span>
        </div>
        <div class="export-button" @click="dewPriont">
          <img src="../../../assets/assessment/icon-print.png" alt=""/>
          <span>导出</span>
        </div>
     
        <!--        <div
                  class="add-button"
                  @click="toChangeRecord('/teacher/assessment/addPlan')"
                  style="width: 210px; margin-left: 18px; border: 1px solid #f86900"
                >
                  <img src="../../../assets/zengjia.png" alt=""/>
                  <span style="color: #f86900">增加课程考核实施计划</span>
                </div>-->
      </div>
    </div>
    <div class="table-container">
      <div class="table-header">
        <div class="item cz">
          <div style="margin-bottom: 5px">状态/操作</div>
          <el-checkbox v-model="checkedStatus" @change="checkAll"></el-checkbox>
        </div>
        <div class="item x"><span>系</span><span>【教研室】</span></div>
        <div class="item kcbh">
          <span>课程编号</span><span>【课程名称】</span>
        </div>
        <div class="item pycc">培养层次</div>
        <div class="item xxlx"><span>修习</span><span>类型</span></div>
        <div class="item skjy">授课教员</div>
        <div class="item nj">年级</div>
        <div class="item jxb">教学班</div>
        <div class="item zybc">专业班次</div>
        <div class="item jxbrs">教学班人数</div>
        <div class="item zrs">总人数</div>
        <div class="item fz">分制</div>
        <div class="item kxzy"><span>课下作</span><span>业比例</span></div>
        <div class="item ktcp"><span>课堂测评</span><span>所占比例</span></div>
        <div class="item qzks"><span>期中考试</span><span>所占比例</span></div>
        <div class="item kzkh"><span>课终考核</span><span> 所占比例</span></div>
        <div class="item ypfj"><span>一票</span> <span>否决</span></div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item cz">
          <el-checkbox
            v-model="item.checked"
            @change="itemChange()"
          ></el-checkbox>
          <div  @click="RouterTo('/teacher/assessment/editPlan',item.planid)" v-show="item.state"
               v-if="+item.state === 1 || +item.state === 2">已审核
          </div>
          <div class="cz-save" @click="updateSubmitCouPlan(item.modifyid)" v-show="item.state" v-if="+item.state === 1">
            审查通过
          </div>
          <div class="cz-change" @click="RouterTo('/teacher/assessment/editPlan',item)" v-show="item.state" v-if="+item.state===2">查看/修改
          </div>
          <div class="cz-change" @click="RouterTo('/teacher/assessment/changePlan',item.modifyid)" v-show="item.state" v-if="+item.state===3">打   回
          </div>
        </div>
        <div class="item x">
          <div class="x-title">{{ item.department }}</div>
          <div class="x-context">【{{ item.teachingandresearchsection }}】</div>
        </div>
        <div class="item kcbh">
          <div class="x-title">{{ item.coursenumber }}</div>
          <div class="x-context">【 {{ item.coursename }}】</div>
        </div>
        <div class="item right-content">
          <div class="right-content-info">
            <div class="item pycc">{{ item.traininglevel }}</div>
            <div class="item xxlx">{{ item.studytype }}</div>
            <div class="item skjy">{{ item.teachingfaculty }}*</div>
            <div class="item nj">{{ item.grade }}</div>
            <div class="item jxb">{{ item.classes }}</div>
            <div class="item zybc">{{ item.professionaldivisions }}</div>
            <div class="item jxbrs">{{ item.classsize }}</div>
            <div class="item zrs">{{ item.totalnumber }}</div>
            <div class="item fz">{{ item.scoretypecode }}</div>
            <div class="item kxzy">{{ item.usualscorerate }}</div>
            <div class="item ktcp">{{ item.examscorerate }}</div>
            <div class="item qzks">{{ item.midtermscorerate }}</div>
            <div class="item kzkh">{{ item.experimentscorerate }}</div>
            <div class="item ypfj">{{ item.oneticketveto }}</div>
          </div>
          <div class="spjd">
            <div class="spjd-title">审批进度：</div>
            <div class="time-line-horizon">
              <div class="time-line-block" v-for="(block, index1) in item.courseassesscheckList" :key="index1">
                <div class="person-name">{{ block.submitidentifying }}</div>
                <div class="line-content">
                  <img src="../../../assets/assessment/icon-finish.png" alt="已审批" v-if="+block.coucheckstatus === 3"/>
                  <img src="../../../assets/assessment/icon-dai.png" alt="待审批" v-if="+block.coucheckstatus === 2"/>
                  <img src="../../../assets/assessment/icon-close.png" alt="未审批" v-if="+block.coucheckstatus === 1"/>
                  <div class="date-time">
                    <span class="date">{{ block.couchecktime }}</span>
                    <span class="time">{{ block.couapplytime }}</span>
                  </div>
                </div>
                <div class="operate">
                  <div class="ly-block" @click="textNewadd(block.cheplanid)">
                    <img src="../../../assets/assessment/icon-ly.png" alt=""/>
                    <div class="ly">留言</div>
                  </div>
                </div>
                <div class="operate" v-show="block.checkremark">
                  <div class="bubble-block">
                    <span>{{ block.checkremark }}</span>
                    <div class="operate-button">
                      <!--                         @click="showckMessageDialog = true"-->
                      <div
                        class="button-ck"
                        @click="textSelect(block.cheplanid)"
                        v-show="block.checkremark"
                      >
                        查看
                      </div>
                      <div
                        class="button-bj"
                        @click="textUpdate(block.cheplanid,block.checkremark)"
                        v-show="block.checkremark"
                      >
                        编辑
                      </div>
                      <div
                        @click="textDelete(block.cheplanid)"
                        class="button-sc"
                        v-show="block.checkremark"
                      >
                        删除
                      </div>
                    </div>
                  </div>
                </div>
                <el-dialog
                  title="添加留言"
                  :visible.sync="showAddMessageDialog"
                  width="983px"
                >
                  <div class="message-container">
                    <div>添加留言：</div>
                    <div>
                      <el-input
                        v-model="text"
                        type="textarea"
                        :rows="8"
                        style="width: 550px"
                      ></el-input>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <button class="green" @click="addText(block.cheplanid,text)">
                      确 定
                    </button>
                  </span>
                </el-dialog>
                <el-dialog
                  title="编辑留言"
                  :visible.sync="showbjMessageDialog"
                  width="983px"
                >
                  <div class="message-container">
                    <div>编辑留言：</div>
                    <div>
                      <el-input
                        v-model="text"
                        type="textarea"
                        :rows="8"
                        style="width: 550px"
                      ></el-input>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
<!--                      showbjMessageDialog = false-->
                    <button class="green" @click="update(pid,text)">
                      确 定
                    </button>
                  </span>
                </el-dialog>
                <el-dialog
                  title="查看留言"
                  :visible.sync="showckMessageDialog"
                  width="983px"
                >
                  <div class="message-container">
                    <div>查看留言：</div>
                    <div>
                      <!--                        v-model="block.bjmeaasgeText"-->
                      <el-input
                        v-model="text"
                        type="textarea"
                        :rows="8"
                        style="width: 550px"
                        disabled="false"
                      ></el-input>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <button class="green" @click="showckMessageDialog = false">
                      确 定
                    </button>
                  </span>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt=""/>
<!--        <span>导出Excel</span>-->
        <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          name="填报课程考试计划.xls"
          style="color: #f3b815"
        >
          &ensp;导出Excel
        </download-excel>
      </div>
      <div class="text" style="margin-top:2px">授课教员名字后加“*”为课程负责人</div>
      <div class="pagination-block">
        <el-pagination
          style="padding:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="审核授权" :visible.sync="showYprDialog" width="983px">
      <div class="choose-ypr-container">
        <div class="choose-ypr-search-container">
          <span class="title">单位：</span>
          <el-select
              v-model="dw"
              style="width: 100px; margin-right: 30px"
              size="mini"
              placeholder="请选择"
          >
            <el-option
                v-for="item in dwList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
              style="width: 152px; margin-right: 20px"
              size="mini"
              v-model="courseYpr"
              placeholder="关键字搜索"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <div class="search-button">
            <img src="../../../assets/assessment/icon-search.png" alt=""/>
            <span @click="showYprClick">查询</span>
          </div>
          <div class="button-list">
            <div
                class="button-item"
                v-for="(item, index) in searchNameList"
                :key="index"
                @click="delTag(index)"
            >
              <img
                  class="del-icon"
                  src="../../../assets/assessment/approval-del.png"
                  alt=""
              />
              <div>{{ item }}</div>
            </div>
          </div>
        </div>
        <div class="choose-ypr-table-container">
          <el-table
              ref="multipleTable"
              :data="yjnameList"
              border
              style="width: 100%"
              class="table-data"
              row-class-name="row-class"
              cell-class-name="cell-class"
              header-row-class-name="header-row-class"
              header-cell-class-name="header-cell-class"
              @selection-change="handleSelectionChange"
          >
            <el-table-column
                prop=""
                label="选择"
                width="154"
                type="selection"
                align="center"
                class-name=""
                label-class-name=""
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="153"
                align="center"
            >
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="154" align="center">
            </el-table-column>
            <el-table-column
                prop="unit"
                label="单位"
                width="153"
                align="center"
            >
            </el-table-column>
            <el-table-column prop="job" label="职务" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showYprDialogclosure()">确 定</button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqGetXqList } from "../../../api/classHoursAddList/addList";
import { pyccselect } from "@/api/professional/details";
import {checkUpdate, docPrint, getCheckDetail, queryTeaCheck,hpsetchock, updateSubmit} from "../../../api/courseExame/courseExa";

export default {
  data() {
    return {
      pageNo:1,
      pageSize:10,
      total:'',
      showYprDialog: false,
      selectId:"",
      xq: '',
      xqList: [],
      pycc: '',
      pyccList: [ ],
      dw: "",
      dwList: [],
      xxlx: '',
      xxlxList: [
        {
          value: "选修",
          label: "选修",
        },
        {
          value: "必修",
          label: "必修",
        },
      ],
      zt: '',
      ztList: [
        {
          value: "1",
          label: "未提交",
        },
        {
          value: "2",
          label: "已提交",
        },
      ],
      pid: "",
      text: "",
      courseYpr: "",
      checkedStatus: false,
      tableData: [],
      searchNameList: [],
      yjnameList: [],
      jsonFields:{
        '系': 'department',
        '教研室': 'teachingandresearchsection',
        '课程编号': 'coursenumber',
        '课程名称': 'coursename',
        '培养层次': 'traininglevel',
        '修习类型': 'studytype',
        '授课教员': 'teachingfaculty',
        '专业班次': 'professionaldivisions',
        '教学班人数': 'classsize',
        '总人数': 'totalnumber',
        '分制': 'scoretypecode',
        '课下作业比例': 'usualscorerate'+'%',
        '课堂测评所占比例': 'examscorerate',
        '期中考试所占比例': 'midtermscorerate',
        '课终考核所占比例': 'experimentscorerate',
        '一票否决': 'oneticketveto',
      },
      showAddMessageDialog: false,
      showbjMessageDialog: false,
      showckMessageDialog: false,
      meaasgeText: "",
      course: "",
      teachingfaculty:''
    };
  },
  created() {
    this.getXqList();
    this.pyccselect();
    this.queryQueryTeaCheck();
  },
  mounted(){
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNo = val;
      this.queryQueryTeaCheck();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryQueryTeaCheck();
    },
    // 获取学期院历列表
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    pyccselect() {
      let code = "pylevel";
      return new Promise(() => {
        pyccselect(code).then(res => {
          this.pyccList = res.data.data[0].children;
        });
      });
    },
    updateSubmitCouPlan(cpId) {
      console.log("pid", cpId)
      updateSubmit(cpId, this.userInfo.user_id).then(res => {
        this.open('此操作将保存并提交该文件, 是否继续?');
      });
      this.queryQueryTeaCheck();
    },
    queryQueryTeaCheck() {
      let obj = {
        termid: this.xq,
        traininglevel: this.pycc,
        studytype: this.xxlx,
        coursename: this.course,
        teachingfaculty:this.teachingfaculty,
        detalestatus: this.zt,
        pageNo:this.pageNo,
        pageSize:this.pageSize
      }
      hpsetchock(obj).then(res => {
        this.tableData = res.data.data;
        this.total = res.data.data.length > 0 ? res.data.data[0].tol : '';
        console.log("输出", res.data.data);
        /*for (let i = 0; i < res.data.data.length; i++) {
          for (let j = 0; j < res.data.data.courageousness[i].length; j++) {
            const datetime = res.data.data.courageousness[j].couchecktime;
            this.tableData.courageousness[j].date = datetime.substring(2, 9);
            this.tableData.courageousness[j].time = datetime.substring(11, 13);
            console.log("输入", res.data.data.courageousness[j].couchecktime);
          }
        }*/
      })
    },
    textNewadd(cpId){
      this.text = '';
      this.pid = cpId;
      this.showAddMessageDialog = true;
    },
    textSelect(cpId) {
      getCheckDetail(cpId).then(res => {
        this.text = res.data.data.checkremark;
      });
      this.showckMessageDialog = true;
    },
    textUpdate(cpId) {
      getCheckDetail(cpId).then(res => {
        this.text = res.data.data.checkremark;
      });
      this.pid = cpId;
      this.showbjMessageDialog = true;
    },
    textDelete(ids) {
      let obj = {
        cheplanid: ids,
        checkremark: "",
      }
      this.showbjMessageDialog = false;
      checkUpdate(obj).then(res => {
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
        this.queryQueryTeaCheck();
      })
    },
    addText(tid, tex) {
      this.showAddMessageDialog = false;
      this.update(tid, tex);
      console.log("tid" + tid);
    },
    update(cpId, cText) {
      let obj = {
        cheplanid: this.pid,
        checkremark: cText,
      };
      this.showbjMessageDialog = false
      checkUpdate(obj).then(res => {
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        });
        this.queryQueryTeaCheck();
      });
    },
    RouterTo(path, plan) {
      this.$router.push({
        path: path,
        query: {
          planid: plan
        }
      })
    },
    handleQuery() {
      this.pageNo = 1;
      this.queryQueryTeaCheck();
    },
    open(str) {
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消保存",
          });
        });
    },
    checkAll() {
      this.tableData = this.tableData.map((item) => {
        return {...item, checked: this.checkedStatus};
      });
    },
    dewPriont(){
      docPrint(this.selectId).then(respones => {
        this.$message({
          type: 'success',
          message: '导出成功'
        })
      })
    },
    itemChange() {
      this.checkedStatus = this.tableData.every((item) => {
        this.selectId = item.planid;
        return item.checked;
      });
      console.log("pid",this.selectId);
    },
    toChangeRecord() {
      // this.$router.push(url);
    },
    toEditPlan() {
      this.$router.push("/teacher/assessment/editPlan");
    },
    toChangePlan() {
      this.$router.push("/teacher/assessment/changePlan");
    },
  },
};
</script>

<style lang="less" scoped>
.assessment-container {
  .choose-ypr-container {
    width: 767px;
    margin: 0px auto;

    .choose-ypr-search-container {
      .el-input--prefix .el-input__inner {
        padding-left: 30px;
      }

      .el-input__inner {
        &::placeholder {
          color: #b8b8b8;
        }

        &::-webkit-input-placeholder {
          /* WebKit browsers 适配谷歌 */
          color: #b8b8b8;
        }

        &:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 适配火狐 */
          color: #b8b8b8;
        }

        &::-moz-placeholder {
          /* Mozilla Firefox 19+ 适配火狐 */
          color: #b8b8b8;
        }

        &:-ms-input-placeholder {
          /* Internet Explorer 10+  适配ie*/
          color: #b8b8b8;
        }
      }

      display: flex;
      flex-direction: row;
      align-items: center;

      .title {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 20px;
        color: #004ca7;
        margin-right: 5px;
      }

      .search-button {
        width: 77px;
        height: 28px;
        line-height: 28px;
        background: #f1f8fe;
        border: 1px solid #51aef6;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        > span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #51aef6;
        }

        > img {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
      }

      .button-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 21px;

        .button-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 69px;
          height: 27px;
          line-height: 27px;
          border: 1px solid #004ca7;
          border-radius: 4px;
          margin-right: 10px;
          text-align: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #004ca7;

          .del-icon {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 12px;
            height: 12px;
            padding: 2px;
          }
        }
      }
    }

    .choose-ypr-table-container {
      margin-top: 30px;

      .el-table td,
      .el-table th.is-leaf,
      .el-table--border,
      .el-table--group {
        border-color: #c7d7eb;
      }

      .el-table__header tr,
      .el-table__header th {
        padding: 0;
        height: 57px;
        background-color: #edf2f9;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 20px;
        color: #004ca7;
      }

      .el-table__body tr,
      .el-table__body td {
        padding: 0;
        height: 51px;
      }

      .table-data {
        width: 100%;
        border: 0.8px solid #004ca7;
        border-radius: 9px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;
      }
    }
  }

 
  .el-dialog__footer {
    padding: 10px 20px 45px;
  }

  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
    height: 18px;
    width: 18px;
  }

  .el-checkbox__inner::after {
    height: 10px;
    left: 6px;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/planag.less";

.pagination-block {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.message-container {
  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {
    }
  }
}
</style>
